<template>
  <!-- 导航tab -->
  <div class="classify-list">
    <div class="list">
      <div
        v-for="(item, index) in classifyList"
        :key="index"
        :style="[
          active == index ? propsData.params.activeCss : propsData.params.nameCss,
          {
            backgroundColor:
              active == index ? propsData.params.activeShopNameBgColor : propsData.params.shopNameBgColor,
            marginRight: propsData.params.shopNameSpace + 'px',
          },
        ]"
        class="classifyItem"
        @click.stop="handleTab(item, index)"
      >
        {{ item.title }}
        <div class="item-hover" v-if="active == index">
          <div class="edit-box" @click.stop="handleClassifyTabItem('activeShopClassifyControl', item, index)">
            <i class="iconfont icon-mokuai-bianji"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    active: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {}
  },
  mounted() {},
  watch: {},
  computed: {
    classifyList() {
      if (this.propsData.params.classifyList.length <= 0) {
        let arr = []
        for (let i = 0; i < 6; i++) {
          let obj = {
            title: '标题',
            data: null,
            dataFrom: '',
            classifyId: '',
          }
          arr.push(obj)
        }
        return arr
      }
      return this.propsData.params.classifyList
    },
  },
  methods: {
    // 点击切换tab
    handleTab(item, index) {
      this.$emit('changeTab', { item, index })
    },
    // 点击编辑当前状态
    handleClassifyTabItem(name, item, index) {
      this.handleTab(item, index)
      console.log('点击单个专题导航')
      let data = Object.assign({}, this.propsData)
      data.controlComName = name
      this.$emit('handleClassifyTabItem', data)
    },
  },
}
</script>

<style lang="scss" scoped>
.classify-list {
  width: 100%;
  padding: 0 12px;
  overflow-x: auto;
  .list {
    display: flex;
    align-items: center;
    width: 100%;
    .classifyItem {
      padding: 2px 10px;
      border-radius: 999px;
      white-space: nowrap;
      position: relative;
      z-index: 2;
      .item-hover {
        width: 102%;
        height: 100%;
        border: 1px solid #1890fc;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
        z-index: 1;
        .edit-box {
          width: 20px;
          height: 20px;
          background: #1890fc;
          border-radius: 0px 0px 0px 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          position: absolute;
          right: 0;
          top: 0;
          .iconfont {
            font-size: 18px;
            color: #ffffff;
          }
        }
      }
    }
    .classifyItem:hover > .item-hover {
      display: block;
    }
  }
}
</style>
